<template>
  <div class="content-info">
    <LabelTitle text="感知资源" :showImg="false"></LabelTitle>
    <div class="gzzy-box">
      <div class="deviceList" v-for="(item, index) in list" :key="index">
        <img class="imgsrc" src="@/assets/images/device.png" />
        <div class="info">
          <p class="num">{{ item.perceptionResourceCount || 0 }}</p>
          <p class="text">{{ item.perceptionResourceType }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import LabelTitle from "@/components/labeltitle.vue";
import { onMounted } from "vue";
import { getCommunityResource } from "@/api/sq.js";
const props = defineProps({
  allData: Object,
});

let list = ref([
  {
    title: "普通监控",
    num: "0",
  },
  {
    title: "人车抓拍摄像机",
    num: "0",
  },
  {
    title: "智能烟感",
    num: "0",
  },
  {
    title: "内涝监控摄像机",
    num: "0",
  },
  {
    title: "普通监控",
    num: "0",
  },
  {
    title: "人车抓拍摄像机",
    num: "0",
  },
  {
    title: "普通监控",
    num: "0",
  },
]);

const getData = async () => {
  try {
    let { data } = await getCommunityResource({});
    list.value = data;
  } catch (e) {
    console.error(e);
  }
};

onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.content-info {
  width: 100%;
  margin-top: 22px;
}
.gzzy-box {
  width: 100%;
  height: 320px;
  margin-top: 16px;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
  border-radius: 12px;
  padding: 20px 38px 0 38px;
  overflow: auto;
  display: flex;
  align-items: top;
  flex-wrap: wrap;
  .deviceList {
    width: 50%;
    height: 52px;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    .imgsrc {
      width: 52px;
      height: 52px;
      margin-right: 36px;
    }
    .num {
      font-family: YouSheBiaoTiHei;
      font-size: 24px;
      color: #2263bf;
    }
    .text {
      margin-top: 5px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 12px;
      color: #999999;
    }
  }
}
</style>
